<!DOCTYPE html>
<!--
Created using JS Bin
http://js.jirengu.com

Copyright (c) 2023 by q1054261752 (//js.jirengu.com/pagar/2/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta name="description" content="[练习div.parent  div.child   flex-direction:column;,当flex-direction属性设置为column时，主轴方向会沿着垂直方向，起点在上沿。这意味着项目会从上到下排列。" />
  <meta charset="utf-8">
  <title>div.parent  div.child  flex  row</title>
<style id="jsbin-css">
.parent{
  display:flex;
  background:#ddd;
  flex-direction:column;
}
.child{
  background:white;
  height:50px;
  width:100px;
  margin:5px;
}


</style>
</head>
<body>
  <div class="parent">
    <div class="child child1">1</div>
    <div class="child child2">2</div>
    <div class="child child3">3</div>
    <div class="child child1">4</div>
    <div class="child child1">5</div>
  </div>

  

</body>
</html>